<template>
	<view class="viewbox auto p-top20 p-bot100" :style="{'--color':color}">
		<status-bar :title='title' :back='1'></status-bar>
		<image :src="$imgUrls(surface.poster)" mode="widthFix" class="rows m-bot30"></image>
		<view class="row a-center m-bot30" v-for="(item,index) in pageData" :key="index">
			<view class="rankNum flexac color_66 size30 bold m-right20">
				<image :src="$online(`${index+1}.png`)" class="rankNum" v-if="index <= 2"></image>
				<text v-else>{{index+1}}</text>
			</view>
			<image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="user_img bor_radius m-right20">
			</image>
			<view class="flex-1 d-flex f-column ">
				<text class="color_33 size28">{{item.v_name}}</text>
				<text class="color_66 size22">{{item.department}}</text>
			</view>
			<view class="d-flex a-center color_FF6 size28">
				<text class="bold">{{item.retire_count}}</text>
			</view>
		</view>

		<view class="footer" v-if="pageData.length && surface.my_rank != '暂无排名'" @click="lookMyrank">
			我排在第{{surface.my_rank}}位,点击查看</view>
		<emptys v-if="!pageData.length"></emptys>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				title: '排行榜',
				surface: '',
				pageData: [],
				page: 1,
				limit: 20,
				more: true,
			}
		},
		onLoad() {
			this.saleProgressRank();
		},
		methods: {
			saleProgressRank() {
				this.$http.get({
					url: '/BlockApi/saleProgressRank',
					data: {
						page: this.page,
						limit: this.limit
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data.list || [];
					this.surface = res.data;
					this.page == 1 ? this.pageData = result : this.pageData = [...this.pageData, ...result];
					if (result.length < this.limit) this.more = false;
				})
			},
			lookMyrank() {
				this.page = this.surface.my_page;
				this.pageData = [];
				this.saleProgressRank();
			}
		},
		onReachBottom() {
			if (!this.more) return;
			this.page++;
			this.saleProgressRank();
		},
		computed: {
			...mapState(['color']),
		}
	}
</script>

<style lang="scss" scoped>
	.rankNum {
		width: 58rpx !important;
		height: 70rpx !important;
	}

	.user_img {
		width: 70rpx;
		height: 70rpx;
	}

	.footer {
		width: 690rpx;
		height: 80rpx;
		background-color: var(--color);
		border-radius: 10rpx;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
	}
</style>